<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Simple Seam Framework</title>
		<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"></link>
    	<script type="text/javascript" src="extjs/ext-all.js"></script>
    	<script type="text/javascript">
    	/* <![CDATA[ */
    	Ext.require(['Ext.data.*']);
    	Ext.require('Ext.chart.*');

    	Ext.onReady(function() {
	    	Ext.define('profolio', {
	    	    extend: 'Ext.data.Model',
	    	    fields: ['product', 'quantity']
	    	});
	
	    	var store = Ext.create('Ext.data.Store', {
	    	    model: 'profolio',
	    	    data: [
	    	        { product: 'Fix Income', quantity: 60000000 },
	    	        { product: 'Equity',     quantity: 30000000 },
	    	        { product: 'Credit',     quantity: 10000000 }
	    	    ]
	    	});
	
	    	Ext.create('Ext.chart.Chart', {
	    		renderTo: Ext.get('pie'),
	    		animate: true,
				width: 320,
				height: 280,
				store: store,
				legend: {
			        position: 'right'
			    },
				series: [{
			        type: 'pie',
			        field: 'quantity',
			        showInLegend: true,
			        highlight: {
			          segment: {
			            margin: 20
			          }
			        },
			        label: {
			            field: 'product',
			            display: 'rotate',
			            contrast: true,
			            font: '14px Arial'
			        }
			    }]
	    	});

	    	var store3 = Ext.create('Ext.data.Store', {
	    	    storeId:'simpsonsStore',
	    	    fields:['name', 'email', 'phone'],
	    	    data:{'items':[
	    	        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
	    	        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
	    	        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
	    	        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  },
	    	        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  },
	    	        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
	    	    ]},
	    	    proxy: {
	    	        type: 'memory',
	    	        reader: {
	    	            type: 'json',
	    	            root: 'items'
	    	        }
	    	    }
	    	});

	    	Ext.create('Ext.grid.Panel', {
	    	    title: 'Simpsons',
	    	    store: store3,
	    	    columns: [
	    	        { text: 'Name',  dataIndex: 'name' },
	    	        { text: 'Email', dataIndex: 'email', flex: 1 },
	    	        { text: 'Phone', dataIndex: 'phone' }
	    	    ],
	    	    height: 280,
	    	    renderTo: Ext.get('list')
	    	});

	    	Ext.define('forecast', {
	    	    extend: 'Ext.data.Model',
	    	    fields: ['year', 'quantity']
	    	});

	    	var store1 = Ext.create('Ext.data.Store', {
	    	    model: 'forecast',
	    	    data: [
	    	        { year: 2010, quantity: 2342343 },
	    	        { year: 2011, quantity: 3844843 },
	    	        { year: 2012, quantity: 1343445 },
	    	        { year: 2013, quantity: 9089348 },
	    	        { year: 2014, quantity: 4848393 },
	    	        { year: 2015, quantity: 2134434 },
	    	        { year: 2016, quantity: 9345489 },
	    	        { year: 2017, quantity: 2344456 },
	    	        { year: 2018, quantity: 4455653 },
	    	        { year: 2019, quantity: 8787487 }
	    	    ]
	    	});

	    	var a = Ext.create('Ext.chart.Chart', {
	    		store: store1,
	    		legend: {
			        position: 'right'
			    },
	    	    axes: [
	    	        {
	    	            title: 'Quantity',
	    	            type: 'Numeric',
	    	            position: 'left',
	    	            fields: ['quantity']
	    	        },
	    	        {
	    	            title: 'Year',
	    	            type: 'Category',
	    	            position: 'bottom',
	    	            fields: ['quantity'],
	    	            dateFormat: 'ga'
	    	        }
	    	    ],
	    		series: [
	    	        {
	    	        	showInLegend: true,
	    	            type: 'line',
	    	            xField: 'year',
	    	            yField: 'quantity'
	    	        }
	    	    ]
	    	});
	    	
	    	Ext.create('Ext.container.Container', {
	    	    layout: 'fit',
	    	    height: 360,
	    	    renderTo: Ext.get('fcv'),
	    	    items: a
	    	}); 
    	});
    	/* ]]> */
    	</script>
	</head>
	<body>
		<table border="0" style="width:100%; border-collapse: separate; border-spacing: 5px">
			<tbody>
				<tr>
					<td id="pie" style="width: 360px; height: 280px; border: 1px solid #BDC7D8; background-color: #FFFFFF"></td>
					<td id="list" style="background-color: #FFFFFF; vertical-align: top"></td>
				</tr>
				<tr>
					<td id="fcv" colspan="2" style="height: 360px; border: 1px solid #BDC7D8; background-color: #FFFFFF"></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>